<template>
  <div class="color">
    <DFPageList ref="dfPageListRef" :page-options="pageOptions" />
  </div>
</template>

<script lang="ts" setup name="Color">
  import { h, ref } from 'vue';
  import lang from './lang';
  import { addColor, delColor, pageColor, updateColor } from '@/api/base/color';
  import { useMixins,  } from '@/hooks/useMixins';

  const { loadLangFn,getDictDataListFn } = useMixins();

  const dfPageListRef: any = ref(null);

  loadLangFn(lang);

  const colorTypeList = ref([]);

  const pageOptions = {
    searchForm: {
      formSchemas: [
        {
          label: 'colorName',
        },
        {
          label: 'colorCode',
        },
        {
          label: 'colorModel',
        },
      ],
    },
    table: {
      columns: [
        {
          width: 120,
          label: 'colorName',
        },
        {
          width: 120,
          label: 'colorCode',
        },
        {
          width: 120,
          label: 'color',
          render({ color }) {
            return color
              ? h('span', {
                  style: {
                    backgroundColor: color,
                    display: 'block',
                    width: '24px',
                    height: '24px',
                    border: '1px solid #ddd',
                  },
                })
              : '-';
          },
        },
        {
          width: 120,
          label: 'colorModel',
        },
        {
          width: 120,
          label: 'remark',
          common: true,
        },
      ],
      action: {
        columns: [
          {
            label: 'edit',
          },
          {
            label: 'delete',
          },
        ],
      },
      operaColumn: [
        {
          label: 'add',
        },
      ],
      requestFn: pageColor,
      delRequestFn: delColor,
    },
    modalFormDialog: {
      formSchemas: [
        {
          label: 'colorName',
          required: true,
        },
        {
          label: 'colorCode',
          editDisabled: true,
          required: true,
        },
        {
          label: 'color',
          component: 'NColorPicker',
          modes: ['hex'],
          defaultValue: undefined,
          showAlpha: false,
        },
        {
          label: 'colorModel',
        },
        {
          label: 'brand',
        },
        {
          label: 'viscosity',
        },
        {
          label: 'unitPrice',
        },
        {
          label: 'colorType',
          prop: 'colorTypeCode',
          checkProp: 'colorTypeName',
          component: 'NSelect',
          options: colorTypeList,
          required: true,
          defaultValue:"1",
          componentProps: {
            onUpdateValue(_v: string, option: any, updateFormModelFn: any) {
              if (option) {
                if (typeof updateFormModelFn === 'function') {
                  const { label, value } = option;
                  updateFormModelFn({
                    colorTypeCode: value,
                    colorTypeName: label,
                  });
                }
              } else {
                typeof updateFormModelFn === 'function' &&
                  updateFormModelFn({
                    colorTypeCode: null,
                    colorTypeName: null,
                  });
              }
            },
          },
        },
        {
          label: 'remark',
          common: true,
          type: 'textarea',
        },
      ],
      addDataFn: addColor,
      updateDataFn: updateColor,
      setDialogSubmitDataFn: (data) => {
        const { colorTypeCode } = data;

        data.colorTypeName = colorTypeList.value.find((item) => item.value === colorTypeCode)?.label || '';

        return data;
      },
    },
  };

  const initFn = async () => {
    const res = await Promise.all([getDictDataListFn('ink_painting_type')]);

    const [list1] = res;

    colorTypeList.value = list1;
  };

  initFn();
</script>
